import React, { useState, useEffect } from "react";

import { createStore } from "redux"

function countReducer(state={value:0}, action){
  console.log("redducer:", state.value);
  switch(action.type) {
    case "plus":
      return {value:state.value+1}
    case "minus":
      return {value:state.value-1}
    default:
      return state
  }
}

const store = createStore(countReducer)

const createPlusAction = data=>({type:"plus", data})
const createMinusAction = data=>({type:"minus", data})

export default function App() {
  const [count, setCount] = useState()

  const plus=()=>{
    store.dispatch(createPlusAction(1))
  }
  const minus=()=>{
    store.dispatch(createMinusAction(1))
  }

  useEffect(()=>{
    store.subscribe(()=>{
      const state = store.getState()
      setCount(state.value)
    })
  })


  return (
    <div>
      <p>结果:{count}</p>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}
